<html>
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Rubin&#39;s Blog</title>
<meta name="description" content="温故而知新" />
<link rel="shortcut icon" href="https://jrb1995.gitee.io/favicon.ico?v=1588066216187">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@1.3.1/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

<link rel="stylesheet" href="https://jrb1995.gitee.io/styles/main.css">
<link rel="alternate" type="application/atom+xml" title="Rubin&#39;s Blog - Atom Feed" href="https://jrb1995.gitee.io/atom.xml">



  </head>
  <body>
    <div class="main px-4 flex flex-col lg:flex-row">
      <div id="sidebar" class="sidebar-wrapper lg:static lg:w-1/4">
  <div class="lg:sticky top-0">
    <div class="sidebar-content">
      <div class="flex lg:block p-4 lg:px-0 items-center fixed lg:static lg:block top-0 right-0 left-0 bg-white z-50">
        <i class="remixicon-menu-2-line lg:mt-4 text-2xl cursor-pointer animated fadeIn" onclick="openMenu()"></i>
        <a href="https://jrb1995.gitee.io">
          <img class="animated fadeInLeft avatar rounded-lg mx-4 lg:mt-32 lg:mx-0 mt-0 lg:w-24 lg:h-24 w-12 w-12" src="https://jrb1995.gitee.io/images/avatar.png?v=1588066216187" alt="">
        </a>
        <h1 class="animated fadeInLeft lg:text-4xl font-extrabold lg:mt-8 mt-0 text-xl" style="animation-delay: 0.2s">Rubin&#39;s Blog</h1>
      </div>
      
        <div class="animated fadeInLeft" style="animation-delay: 0.4s">
          <p class="my-4 text-gray-600 font-light hidden lg:block">
            温故而知新
          </p>
          <div class="animated fadeInLeft social-container hidden lg:block" style="animation-delay: 0.6s">
            
              
                <a href="https://github.com/jrb1995" target="_blank" class="mr-4 text-xl text-gray-400 font-light hover:text-gray-900">
                  <i class="remixicon-github-line"></i>
                </a>
              
            
              
            
              
            
              
                <a href="https://www.zhihu.com/people/jiang-ru-bin-95/activities" target="_blank" class="mr-4 text-xl text-gray-400 font-light hover:text-gray-900">
                  <i class="remixicon-zhihu-line"></i>
                </a>
              
            
              
            
              
            
              
            
              
            
              
            
              
            
          </div>
        </div>
      
    </div>
  </div>
</div>

<div class="menu-container">
  <i class="remixicon-arrow-left-line text-2xl cursor-pointer animated fadeIn close-menu-btn" onclick="closeMenu()"></i>
  <div>
    
      
        <a href="/" class="menu" style="animation-delay: 0s">
          首页
        </a>
      
    
      
        <a href="/archives" class="menu" style="animation-delay: 0.2s">
          归档
        </a>
      
    
      
        <a href="/tags" class="menu" style="animation-delay: 0.4s">
          标签
        </a>
      
    
      
        <a href="/post/about" class="menu" style="animation-delay: 0.6000000000000001s">
          关于
        </a>
      
    
  </div>
  <div class="site-footer">
    <div class="py-4 text-gray-700">Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a></div>
    <a class="rss" href="https://jrb1995.gitee.io/atom.xml" target="_blank">RSS</a>
  </div>
</div>
<div class="mask" onclick="closeMenu()">
</div>
      <div class="content-wrapper py-32 lg:p-8 lg:w-3/4">
        <h2 class="latest-article text-lg text-gray-700 mb-8">
          <i class="remixicon-article-line"></i>
          最新文章
        </h2>
        
  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${0 * 0.2}s` }">
    
      <a href="https://jrb1995.gitee.io/post/ios-zheng-shu-pei-zhi-zhi-bei/" class="feature-image-wrapper bg-gray-100 rounded-lg flex-shrink-0 mr-8 w-full h-56 h-32 md:w-56 md:h-40">
        <div class="post-feature-image lazy w-full h-56 h-32 md:w-56 md:h-40" data-bg="'https://jrb1995.gitee.io/post-images/ios-zheng-shu-pei-zhi-zhi-bei.png'">
        </div>
      </a>
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/ios-zheng-shu-pei-zhi-zhi-bei/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">iOS 证书配置指北</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        
      </div>
      <div class="text-gray-400 text-sm font-light">2020-04-06 / 4 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${1 * 0.2}s` }">
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/vue-yuan-ma-fen-xi-xiang-ying-shi-yuan-li/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">Vue 源码分析 — 响应式原理</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        
      </div>
      <div class="text-gray-400 text-sm font-light">2020-03-15 / 7 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${2 * 0.2}s` }">
    
      <a href="https://jrb1995.gitee.io/post/github-actions-zi-dong-bu-shu-shi-jian/" class="feature-image-wrapper bg-gray-100 rounded-lg flex-shrink-0 mr-8 w-full h-56 h-32 md:w-56 md:h-40">
        <div class="post-feature-image lazy w-full h-56 h-32 md:w-56 md:h-40" data-bg="'https://jrb1995.gitee.io/post-images/github-actions-zi-dong-bu-shu-shi-jian.jpeg'">
        </div>
      </a>
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/github-actions-zi-dong-bu-shu-shi-jian/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">GitHub Actions 自动部署实践</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        
      </div>
      <div class="text-gray-400 text-sm font-light">2020-02-13 / 3 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${3 * 0.2}s` }">
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/git-commit-message-gui-fan-hua-shi-jian/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">Git Commit Message 规范化实践</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        
      </div>
      <div class="text-gray-400 text-sm font-light">2020-02-06 / 3 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${4 * 0.2}s` }">
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/scrollintoview-shi-xian-ye-mian-mao-dian/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">scrollIntoView 实现页面锚点</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        <p>锚点即指 html 中的链接，在页面中适当的添加锚点可以大大提高阅读或查找效率</p>

      </div>
      <div class="text-gray-400 text-sm font-light">2020-01-30 / 3 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${5 * 0.2}s` }">
    
      <a href="https://jrb1995.gitee.io/post/mac-xia-nvm-de-an-zhuang-he-shi-yong/" class="feature-image-wrapper bg-gray-100 rounded-lg flex-shrink-0 mr-8 w-full h-56 h-32 md:w-56 md:h-40">
        <div class="post-feature-image lazy w-full h-56 h-32 md:w-56 md:h-40" data-bg="'https://jrb1995.gitee.io/post-images/mac-xia-nvm-de-an-zhuang-he-shi-yong.jpg'">
        </div>
      </a>
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/mac-xia-nvm-de-an-zhuang-he-shi-yong/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">Mac 下 nvm 的安装和使用</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        
      </div>
      <div class="text-gray-400 text-sm font-light">2019-12-18 / 2 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${6 * 0.2}s` }">
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/han-shu-de-fang-dou-he-jie-liu/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">函数的防抖和节流</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        
      </div>
      <div class="text-gray-400 text-sm font-light">2019-11-28 / 6 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${7 * 0.2}s` }">
    
      <a href="https://jrb1995.gitee.io/post/5dc8a231f268da4d40712f8a/" class="feature-image-wrapper bg-gray-100 rounded-lg flex-shrink-0 mr-8 w-full h-56 h-32 md:w-56 md:h-40">
        <div class="post-feature-image lazy w-full h-56 h-32 md:w-56 md:h-40" data-bg="'https://jrb1995.gitee.io/post-images/5dc8a231f268da4d40712f8a.jpg'">
        </div>
      </a>
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/5dc8a231f268da4d40712f8a/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">CSS开发技巧整理</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        
      </div>
      <div class="text-gray-400 text-sm font-light">2019-11-11 / 2 min read</div>
    </div>
  </section>

  <section class="post-item md:flex pb-12 animated fadeIn" :style="{ 'animation-delay': `${8 * 0.2}s` }">
    
      <a href="https://jrb1995.gitee.io/post/react-native/" class="feature-image-wrapper bg-gray-100 rounded-lg flex-shrink-0 mr-8 w-full h-56 h-32 md:w-56 md:h-40">
        <div class="post-feature-image lazy w-full h-56 h-32 md:w-56 md:h-40" data-bg="'https://jrb1995.gitee.io/post-images/react-native.jpg'">
        </div>
      </a>
    
    <div class="content">
      <a href="https://jrb1995.gitee.io/post/react-native/">
        <h2 class="post-title text-xl font-extrabold mt-5 md:mt-0">React Native 知识点小记</h2>
      </a>
      <div class="post-abstract text-gray-700 font-light my-4">
        <p>此篇文章用于记录开发中遇到的问题和知识点...</p>

      </div>
      <div class="text-gray-400 text-sm font-light">2019-04-08 / 5 min read</div>
    </div>
  </section>

        <div class="read-more">
          
        </div>
        <div class="index-page">
          <div class="pagination-container animated fadeIn">
  
  
</div>

        </div>
      </div>
    </div>

    <script src="https://jrb1995.gitee.io/media/prism.js"></script>  
<script>

Prism.highlightAll()

let mainNavLinks = document.querySelectorAll(".markdownIt-TOC a");

// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
//    _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;

  mainNavLinks.forEach((link, index) => {
    let section = document.getElementById(decodeURI(link.hash).substring(1));
    let nextSection = null
    if (mainNavLinks[index + 1]) {
      nextSection = document.getElementById(decodeURI(mainNavLinks[index + 1].hash).substring(1));
    }
    if (section.offsetTop <= fromTop) {
      if (nextSection) {
        if (nextSection.offsetTop > fromTop) {
          link.classList.add("current");
        } else {
          link.classList.remove("current");    
        }
      } else {
        link.classList.add("current");
      }
    } else {
      link.classList.remove("current");
    }
  });
});


document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll(".post-feature-image.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target
          lazyImage.style.backgroundImage = `url(${lazyImage.dataset.bg})`
          lazyImage.classList.remove("lazy")
          lazyImageObserver.unobserve(lazyImage)
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage)
    })
  } else {
    // Possibly fall back to a more compatible method here
  }
});

const menuContainer = document.querySelector('.menu-container')
const menus = document.querySelectorAll('.menu-container .menu')
const mask = document.querySelector('.mask')
const contentWrapper = document.querySelector('.content-wrapper')
const latestArticle = document.querySelector('.latest-article')
const readMore = document.querySelector('.read-more')
const indexPage = document.querySelector('.index-page')

const isHome = location.pathname === '/'
if (latestArticle) {
  latestArticle.style.display = isHome ? 'block' : 'none'
  readMore.style.display = isHome ? 'block' : 'none'
  indexPage.style.display = isHome ? 'none' : 'block'
}

const openMenu = () => {
  menuContainer.classList.add('open')
  menus.forEach(menu => {
    menu.classList.add('animated', 'fadeInLeft')
  })
  mask.classList.add('open')
  contentWrapper.classList.add('is-second')
}

const closeMenu = () => {
  menuContainer.classList.remove('open')
  menus.forEach(menu => {
    menu.classList.remove('animated', 'fadeInLeft')
  })
  mask.classList.remove('open')
  contentWrapper.classList.remove('is-second')
}
</script>
  

    <script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
  </body>
</html>
